<template>
  <div class="software-container container">
    <div class="software-wapper">
      <el-card class="software-card">
        <div class="software">
          <div>你好，勇士！ 目前游戏板块博主还在努力开发中。。。</div>
          <div>你可以点击当前页面的绿色画布来【消遣】   </div><br/>
          <div>或者</div><br/>
          <div>我在 
            <el-link href="https://yandex.com/games/zh" target="_blank" type="warning">这里放置了一个在线游戏链接</el-link>
            ，在线畅玩
          </div>
        </div>
        <div id="myapp" @click="handleClick">
          <div
            v-for="(circle, index) in circles"
            :key="index"
            :style="{
              position: 'absolute',
              left: circle.x + 'px',
              top: circle.y + 'px',
              width: circle.size + 'px',
              height: circle.size + 'px',
              borderRadius: '50%',
              backgroundColor: circle.color,
              opacity: circle.opacity,
              transition: 'all 1s ease-out',
            }"
          ></div>
        </div>
      </el-card>
    </div>
  </div>
</template>


<script>
import { ref, reactive, onMounted } from "vue";

export default {
  setup() {
    const circles = reactive([]);
    let clickCount = 0;

    const handleClick = (e) => {
      clickCount++;
      const x = e.offsetX; // 使用offsetX获取相对于触发点击事件元素内部的横坐标位置
      const y = e.offsetY; // 使用offsetY获取相对于触发点击事件元素内部的纵坐标位置
      const color = `hsl(${Math.random() * 360}, 70%, 50%)`;
      circles.push({
        x,
        y,
        size: 20,
        color,
        opacity: 1,
      });
      // 每点击5次，加快所有圆形的动画速度
      if (clickCount % 5 === 0) {
        circles.forEach((circle) => {
          circle.transition = "all 0.5s ease-out";
        });
      }
    };

    onMounted(() => {
      window.addEventListener("click", handleClick);
      return () => {
        window.removeEventListener("click", handleClick);
      };
    });

    return {
      circles,
    };
  },
};
</script>

<style lang="scss" scoped>
.software-container {
  .software-wapper {
    margin-top: 80px;
    width: 65%;
    .software-card {
      background-color: #98fb98;
    }
    .software {
      padding: 10px;
      margin-bottom: 30px;
    }
    #myapp {
      width: 100vw;
      height: 100vh;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
  }
}
</style>
